<template>
  <div class="project-container">
    <Headbar />
    <HeadMenu />
    <div class="project-swiper" v-if="motif!=null">
      <el-carousel trigger="click" height="500px" arrow="never" :indicator-position="motif.images.length >1?'':'none'" :interval="5000">
        <el-carousel-item v-for="(item,index) in motif.images" :key="index">
          <div class="brandBannerImg" :style="'background-image:url('+URL.PIC+item+')'"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="project-content yh-layout-box" v-if="motif!=null">
      <div class="project-yh-item" v-for="(res,i) in motif.floors">
        <div class="project-header">
          <div class="project-header-text">{{res.floorName}}</div>
          <div class="project-header-line"></div>
        </div>
        <div class="project-pd-wrap">
          <div class="project-pd-ul">
            <div class="project-pd-li" v-for="(product,i) in res.productIdList" @click="routeToPath('/product/detail?id='+product.id, 'new')">
              <img class="project-pdImg" :src="URL.PIC+product.mainImgPath">
              <p class="project-pd-title">{{product.title}}</p>
              <div class="project-pd-price">￥{{product.productSpecification.sellingPrice}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 活动专题已下架 -->
    <div v-if="motif==null">
      <div class="order-nodata">
        <img src="@/assets/images/nodata/active_lower.png" />
        <p>活动已下架~</p>
      </div>
    </div>
    <Hungbar />
    <Footbars />
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import {selectMotif,findProducts} from '@/api/motif'

export default {
  name: 'Project',
  components: {
    Headbar,
    HeadMenu,
    Hungbar,
    Footbars,
  },
  data() {
    return {
        motifId:this.getUrlParams("motifId"),
        motif:{},
    }
  },
  created() {
    this.selectMotif();
  },
  methods: {
    selectMotif(){
      selectMotif({id:this.motifId}).then(res=>{
          if(res.code == 200){
            this.motif = res.data;
            this.motif.floors.forEach((item,index) =>{
              //获取商品详情
              if(item.productIdList.length>0){
                let obj = {ids:item.productIdList.join(",")};
                findProducts(obj).then(obj =>{
                   item.productIdList = obj.data;
                });
              }else{
                item.productIdList = [];
              }
            });
          }else{
            this.motif = null;
          }
      });
    }
  }
}
</script>

<style lang="scss" scoped>

  .order-nodata{
    padding: 140px 0;
    text-align: center;
    p{
      font-size: 14px;
      color: #888;
      margin-top: -40px;
    }
  }

.project-container{
  .project-swiper{
    min-width: 1200px;
    .el-carousel{
      width: 100%;
    }
    .brandBannerImg{
      width: 100%;
      height: 500px;
      min-width: 1200px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;  
    }
  }
  
  .project-content{
    text-align: center;
    padding: 15px 0;
    .project-header{
      .project-header-text{
        font-size: 48px;
        color: #333;
        font-weight: bold;
        padding-top: 30px;
      }
      .project-header-line{
        width: 100px;
        height: 5px;
        background: rgba(30,139,237,.4);
        margin: 20px auto 40px;
      }
    }
    .project-pd-wrap{
      width: 1230px;
      margin-left: -15px;
      .project-pd-ul{
        overflow: hidden;
        zoom: 1;
        width: 1200px;
        .project-pd-li{
          float: left;
          width: 210px;
          margin-left: 30px;
          margin-bottom: 20px;
          cursor: pointer;
          .project-pdImg{
            width: 210px;
            height: 210px;
            border-radius: 10px;
          }
          .project-pd-title{
            font-size: 14px;
            color: #333;
            display: -webkit-box;
            text-align: left;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            padding: 0 10px;
            height: 30px;
          }
          .project-pd-title:hover{
            color: #255b8b;
          }
          .project-pd-price{
            color: #D0021B;
            font-size: 16px;
          }
        }
        .project-pd-li:hover .project-pdImg{
          -webkit-box-shadow: 0 12px 36px rgba(0,0,0,.1);
          box-shadow: 0 12px 36px rgba(0,0,0,.1);
        }
      }
    }
  }
}

</style>
<style lang="scss">
  .project-swiper{
    .el-carousel__button {
      display: block;
      opacity: .48;
      width: 30px;
      height: 4px;
      background-color: #FFF;
      border: none;
      outline: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      -webkit-transition: .3s;
      transition: .3s;
    }
  }

  .center-container .el-carousel__indicator .el-carousel__button{
    width: 16px;
    height: 16px;
    border-radius: 50%;
  }

  .project-swiper{
    min-width: 1200px;
    .brandBannerImg{
      width: 100%;
      height: 500px;
      min-width: 1200px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
    .el-carousel__arrow--right {
      right: 64px;
    }
    .home-swiper-item{
      background-size: cover;
      background-position: center;
    }
  }
  .project-swiper .el-carousel__arrow {
    height: 54px;
    width: 54px;
    font-size: 22px;
  }

  .project-swiper .el-carousel__arrow--left {
    left: 50%;
    margin-left: -600px;
  }
  .project-swiper .el-carousel__arrow--right {
    right: 50%;
    margin-right: -600px;
  }
</style>